<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h3>{{ title }}</h3>
      <div>{{showTitle()}}</div>
      <div>{{mytitle}}</div>
      <div>
        <input type="text" v-model="title" />
      </div>
    </div>
    <script>
      // 混入，它和继承是一样的，只不过它的子类可以混入多个父类，而继承只能是单继承
      // 混入定义  全局  和  局部
      // vue2 Vue.mixin
      // vue3 app.mixin
      // 混入中不能有的配置为 el配置，还要注意是 data配置一定要写成函数且返回对象
      // 混入它是可以全局混入和局部混入同时生效的,只是有执行的顺序和优先级
      // data/methods/computed配置 它只有生效一个，谁离我最近，就生效谁
      // watch/生命周期 它是依次执行 全局 --> 局部 --> 组件内，都会执行

      const app = Vue.createApp({
        // 局部混入
        mixins: [
          {
            data() {
              return {
                title: '局部 -- title'
              }
            },
            methods: {
              // showTitle() {
              //   return 'methods 局部 -- ' + this.title
              // }
            },
            computed: {
              mytitle() {
                return 'computed 局部 -- ' + this.title
              }
            },
            watch: {
              title(value) {
                console.log('watch 局部1 -- ' + this.title)
              }
            }
          },
          {
            watch: {
              title(value) {
                console.log('watch 局部2 -- ' + this.title)
              }
            }
          }
        ],
        data() {
          return {
            title: '组件内 -- title'
          }
        },
        methods: {
          // showTitle() {
          //   return 'methods -- ' + this.title
          // }
        },
        computed: {
          mytitle() {
            return 'computed 组件内 -- ' + this.title
          }
        },
        watch: {
          title(value) {
            console.log('watch 组件内 -- ' + this.title)
          }
        }
      })

      // 全局混入
      app.mixin({
        data() {
          return {
            title: '全局 -- title'
          }
        },
        methods: {
          showTitle() {
            return 'methods 全局 -- ' + this.title
          }
        },
        watch: {
          title(value) {
            console.log('watch 全局 -- ' + this.title)
          }
        }
      })

      app.mount('#app')
    </script>
  </body>
</html>
